<template name="components">
	<view>
		<cu-custom>
			<block slot="content">我的</block>
		</cu-custom>
		<view class="personal">
			<view class="personal-inner">
				<view class="logo">
					<view class="logo-inner">
						<image src="https://yshcylah.oss-cn-beijing.aliyuncs.com/file/image/%E7%A7%A9%E6%B1%87.png" mode=""></image>
					</view>
					
					<view class="name">{{ userinfo.username }}</view>
				</view>
				<view class="space-box">
				</view>
			</view>
		</view>
		<view class="cu-list menu" >
			<view class="cu-item">
				<button class="cu-btn content"  @tap="gotoNews">
					<text class="cuIcon-btn colors"></text>
					<text class="text-grey">消息通知</text>
				</button>
			</view>
			<view class="cu-item">
				<button class="cu-btn content"  @tap="gotoCollection">
					<text class="cuIcon-btn colors"></text>
					<text class="text-grey">收藏列表</text>
				</button>
			</view>
			<view class="cu-item">
				<button class="cu-btn content"  @tap="gotoHistory">
					<text class="cuIcon-btn colors"></text>
					<text class="text-grey">历史记录</text>
				</button>
			</view>
			<view class="cu-item">
				<button class="cu-btn content">
					<text class="cuIcon-btn colors"></text>
					<text class="text-grey">意见留言</text>
				</button>
			</view>
			<view class="cu-item">
				<button class="cu-btn content"  @tap="outlogin">
					<text class="cuIcon-btn colors"></text>
					<text class="text-grey">退出登录</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "components",
		data() {
			return {
				userinfo:{}
			};
		},
		onLoad() {
			let userinfo = uni.getStorageSync("userinfo")
			this.userinfo = userinfo
		},
		methods: {
			// 退出登录
			outlogin(){
				uni.setStorageSync("token", '')
				uni.setStorageSync('userinfo', {})
				// console.log(uni.getStorageSync("token"))
				// uni.navigateTo({
				//     url: '../zhihui/zhihui'
				// });
				// uni.navigateBack({
				// 	url:''
				// 	delta:1
				// })
				// uni.navigateTo({
				// 	url:'../zhihui/zhihui',
				// 	delta:0
				// })
				uni.reLaunch({
					url:'../zhihui/zhihui'
				})
			},
			
			// 消息通知
			gotoNews(){
				uni.navigateTo({
				    url: '/pages/assembly/notification'
				});
			},
			
			// 点击收藏列表
			gotoCollection(){
				uni.navigateTo({
					url: '/pages/collection/collection'
				})
			},
			
			// 历史记录
			gotoHistory(){
				uni.navigateTo({
				    url: '/pages/history/history'
				});
			}
		},
	}
</script>

<style lang="scss">
	.page {
		height: 100vh;
	}
	.personal{
		width: 100%;
		height: 250upx;
		background-color: #FFFFFF;
		margin-bottom: 30upx;
		display: flex;
		justify-content: center;
		align-items: center;
		.personal-inner{
			width: 86%;
			height: 180upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.logo{
				display: flex;
				align-items: center;
				width: 70%;
				height: 100%;
				.logo-inner{
					border-radius: 50%;
					width: 35%;
					height: 86%;
					image{
						width: 100%;
						height: 100%;
					}
					
				}
				.name{
					font-size: 47upx;
					font-weight: 600;
					margin-left: 10upx;
				}
			}
			
		}
	}
	.cardTitle {
		color: #fff;
		padding: 90upx 60upx;
		font-size: 40upx;
		font-weight: 300;
		transform: skew(-10deg, 0deg);
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}

	.cardTitle::before {
		content: "";
		position: absolute;
		width: 60upx;
		height: 6upx;
		border-radius: 20upx;
		background-color: #fff;
		display: block;
		top: 60upx;
		left: 50upx;
		transform: skew(10deg, 0deg);
	}

	.cardTitle::after {
		content: "";
		position: absolute;
		width: 140upx;
		border-radius: 6upx;
		height: 24upx;
		background-color: #fff;
		display: block;
		bottom: 76upx;
		left: 90upx;
		transform: skew(10deg, 0deg);
		opacity: 0.1;
	}
	.colors{
		color: #27B2C5;
	}
</style>
